<template>
  <div>
    <div class="logo">
      <img class="logo-img" src="../../assets/logo.svg" alt="">
      <h2 v-show="!isFold" class="logo-font">飞鸢管理系统</h2>
    </div>
    <div class="menu">
      <el-menu
        :default-active="defaultActive"
        :collapse="isFold"
        @open="handleOpen"
        @close="handleClose"
        background-color="#07152b"
        text-color="#adb1b8"
        active-text-color="#fff"
        unique-opened
      >
        <template v-for="item in menu" :key="item.id">
          <el-sub-menu :index="item.id + ''" v-show="item.select">
            <template #title>
              <el-icon>
                <component :is="item.icon"></component>
              </el-icon>
              <span>{{ item.name }}</span>
            </template>

            <template v-for="subitem in item.children" :key="subitem.id">
              <el-menu-item v-if="subitem.type === 2 && subitem.level === 3" :index="subitem.id + ''" @click="handleMenuItem(item, subitem)" v-show="subitem.select">
                {{ subitem.name }}
              </el-menu-item>
              <el-sub-menu v-if="subitem.type === 1 && subitem.level === 3" :index="subitem.id + ''" v-show="subitem.select">
                <template #title>
                  <span>{{ subitem.name }}</span>
                </template>

                <template v-for="threeitem in subitem.children" :key="threeitem.id">
                  <el-menu-item :index="threeitem.id + ''" @click="handleMenuItem(item, threeitem)" v-show="threeitem.select">
                    {{ threeitem.name }}
                  </el-menu-item>
                </template>
              </el-sub-menu>
            </template>
          </el-sub-menu>
        </template>
      </el-menu>
    </div>
  </div>
</template>

<script setup>
  import { computed, ref } from 'vue'
  import { useRoute, useRouter } from 'vue-router';
  import { getItem } from '~/utils/localStorage'
  import { firstRouter, mapPathToMenu } from '~/utils/common'

  defineProps({
    isFold: {
      type: Boolean,
      default: false
    }
  })

  const router = useRouter()

  const menu = getItem('menu')

  function handleOpen() {
    console.log('open')
  }

  function handleClose() {
    console.log('close')
  }

  function handleMenuItem(item, subitem) {
    router.push('/' + item.code + '/' + subitem.code)
  }

  // 默认选中的菜单
  let defaultActive = ref(firstRouter.id + '')
  const route = useRoute()
  // /acl/user
  defaultActive.value = computed(() => {
    const activeMenu = mapPathToMenu(route.path, menu)
    return activeMenu.id + ''
  })

</script>

<style>
  .logo {
    @apply flex h-auto pt-2 pr-5 pb-4 pl-5 flex-row items-center overflow-hidden justify-start;
  }
  .logo-img {
    @apply mt-0 mr-5;
  }
  .logo-font {
    @apply text-light-50;
  }

  .el-menu {
    border-right: none;
    user-select: none;
  }
  .el-menu-item {
    padding-left: 50px !important;
    background-color: #0c2135;
  }
  .el-menu-item:hover {
    color: #fff;
  }
  .el-menu-item.is-active {
    background-color: #0a60bd;
  }
</style>